<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ins资源下载</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        textarea{text-align: center}
        textarea::-ms-input-placeholder{
            text-align: center;
        }
        textarea::-webkit-input-placeholder{
            text-align: center;
        }
        div{
            white-space:normal;
            word-break:break-all;
            word-wrap:break-word;
        }
    </style>
</head>
<body>
<div id="app">

    <el-row :gutter="20">
        <el-col :xs="{span: 20, offset: 2}" :lg="{span: 12, offset: 6}" :xl="{span: 8, offset: 8}" v-loading="loading">
            <div class="grid-content bg-purple" style="padding-top: 2rem">
                <el-input type="textarea" autosize placeholder="分享链接粘贴到这里" clearable
                          ref="shareLink" @keyup.enter.native="analysis" v-model.trim="shareLink"></el-input>
            </div>
        </el-col>
    </el-row>

    <el-row>
        <el-col :xs="{span: 21, offset: 1}" :lg="{span: 16, offset: 4}" v-show="displayVisible">
            <div class="grid-content bg-purple-dark" style="text-align: center;padding-top: 15px">
                <el-link type="success" :underline="false" :href="page">{{page}}</el-link>
                <br />
                <el-image
                        style="width: 140px; height: auto;margin-top: 28px"
                        :src="src"
                        :preview-src-list="srcList">
                </el-image>
                <br />
                <el-link type="success" :underline="false">可点击上面的图片进行放大（多图切换）<el-badge class="mark" :value="srcList.length" /></el-link>
            </div>
            <div v-if="video" style="margin-top: 25px" v-show="displayVideo" v-for="(video,inx) in videos">
                <el-divider content-position="left">Video No.{{inx+1}}</el-divider>
                <el-link type="primary" :underline="false" :href="video.src">{{video.src}}</el-link>
                <div style="margin-top: 25px;text-align: center">
                    <video :poster="video.poster" :src="video.src" controls="controls" width="210" loop>
                        Your browser does not support the video tag.
                    </video>
                </div>
            </div>
            <div class="demo-image__preview" style="text-align: center;padding-top: 25px" v-for="(media,inx) in resource">
                <el-divider content-position="left">Images No.{{inx+1}}</el-divider>
                <div v-for="item in media" style="margin-top: 5px">
                    {{item.size}}, <el-link type="primary" :underline="false" :href="item.src">{{item.src}}</el-link>
                </div>
            </div>
        </el-col>
    </el-row>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            shareLink:      '',
            page:           '',
            src:            '',
            srcList:        [],
            loading:        false,
            displayVisible: false,
            displayVideo:   false,
            resource:       {},
            videos:         [],
        },
        mounted() {
            this.$refs.shareLink.focus();
        },
        methods: {
            analysis: function () {
                this.$refs.shareLink.blur();
                let data            = new FormData();
                data.append('shareLink', this.shareLink);
                this.loading        = true;
                this.srcList        = [];
                this.resource       = [];
                this.videos         = [];
                this.displayVisible = false;
                this.displayVideo   = false;
                axios.post('http://45.201.245.92:56789/ins', data).then(res => {
                    this.loading        = false;
                    this.displayVisible = true;
                    if (res.status != 200) {
                        this.page = `response status: ${res.status}`;
                        return;
                    }
                    const resp = res.data;
                    if (resp.status != "ok") {
                        this.page = resp.data;
                        return
                    }
                    this.page       = this.shareLink;
                    this.shareLink  = "";
                    const medias    = JSON.parse(resp.data);
                    for (const media of medias) {
                        this.srcList.push(media.display);
                        this.resource.push(media.images);
                        if (media.video){
                            this.videos.push({poster: media.display, src: media.video})
                        }
                    }
                    if (this.videos.length > 0){
                        this.displayVideo = true;
                    }
                    this.src = this.resource[0][0]['src'];
                }).catch(error => {
                    console.log(error);
                    this.displayVisible = true;
                });
            }
        }
    })
</script>
</body>
</html>